<template>
  <div class="main">
    <div class="banner">
      <div class="banner-main">
        <span class="banner-main__btn" @click="addDialogVisible = true">伙伴入驻</span>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h3 class="title">合作伙伴类型</h3>
        <div class="partner-wrap">
          <div class="partner-box">
            <h2 class="partner-box__title">产品销售伙伴</h2>
            <p class="partner-box__content">在铝工业互联网平台，发布展示自己的铝产品，依托铝工业互联网平台在铝行业强大的专属用户的覆盖，快速便捷将自己的产品推广出去。</p>
          </div>
          <div class="partner-box">
            <h2 class="partner-box__title">行业服务伙伴</h2>
            <p class="partner-box__content">在铝行业范围内，基于铝工业互联网平台，为铝企业提供行业垂直解决方案或进行二次开发的合作伙伴。</p>
          </div>
          <div class="partner-box">
           <h2 class="partner-box__title">解决方案伙伴</h2>
            <p class="partner-box__content">在铝行业范围内，基于铝工业互联网平台伴，展示面向铝行业的各个场景最新的技术，最优秀解决方案，并依托铝工业互联网平台，为铝企业提供快速交付，售后运维等，不断帮助铝企改进其生产工艺和生产流程等。</p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="model">
      <div class="model-main">
        <div class="model-title">
          <h3 class="title">经典案例</h3>
          <span class="action" @click="toCaseList">查看全部</span>
        </div>
        <el-card 
          class="box-card"
          shadow="hover"
          v-for="(heading, index) in headings"
          :key="index"
        >
          <a @click="goToCaseCenter()">
            <img src="@/assets/logo1.jpg"/>
            <h2 class="title_class">{{heading}}</h2>
            <p class="summary_class" >
              <router-link :to="'/partner/CaseDetail'">
                用户可以在华为云上快速搭建桌面云平台，实现便捷、安全的云上Linux、Windows桌面办公环境。包括便捷的桌面环境创建、部署、统一管理与运维
              </router-link>
            </p>
          </a>
        </el-card>
      </div>
    </div>
    
    <div class="model">
      <div class="model-main">
        <h3 class="title" style="padding: 0 0 48px 0">企业中心</h3>
        <!-- <el-card
          class="box-card"
          shadow="hover"
          v-for="(heading, index) in headings"
          :key="index"
        >
          <a @click="goToEnterpriseCenter()">
            <img src="../../assets/inspur.jpg"/>
            <h2 class="title_class">{{heading}}</h2>
            <p class="summary_class" >
              <router-link :to="'/partner/EnterpriseDetail'">
                经营范围包括云计算、工业互联网、信息、网络科技专业领域内从事技术开发
              </router-link>
            </p>
          </a>
        </el-card> -->
        <div class="wrapper">
          <div class="ant-row" style="margin-left: -6.25px; margin-right: -6.25px;">
            <div class="ant-col" style="padding-left: 6.25px; padding-right: 6.25px;" @click="goToEnterpriseCenter(0)">
              <div class="ant-box">
                <img class="box-img" src="@/assets/energy.jpg"/>
                <div class="box-content" style="padding: 24px 32px 48px">
                  <h1>浪潮云技术股份有限公司</h1>
                  <p> 经营范围包括云计算、工业互联网、信息、网络科技专业领域内从事技术开发、技术咨询、技术转让、技术服务；计算机系统集成；网络工程；计算机软硬件的开发、技术服务、销售；互联网零售；增值电信业务。</p>
                </div>
              </div>
            </div>
            <div class="ant-col" style="padding-left: 6.25px; padding-right: 6.25px;"  @click="goToEnterpriseCenter(1)">
              <div class="ant-box">
                <img class="box-img" src="@/assets/energy.jpg"/>
                <div class="box-content" style="padding: 24px 32px 48px">
                  <h1>广西广投能源集团有限公司</h1>
                  <p>经营范围包括云计算、工业互联网、信息、网络科技专业领域内从事技术开发、技术咨询、技术转让、技术服务；计算机系统集成；网络工程；计算机软硬件的开发、技术服务、销售；互联网零售；增值电信业务</p>
                </div>
              </div>
            </div>
            <div class="ant-col" style="padding-left: 6.25px; padding-right: 6.25px;"  @click="goToEnterpriseCenter(2)">
              <div class="ant-box">
                <img class="box-img" src="@/assets/energy.jpg"/>
                <div class="box-content" style="padding: 24px 32px 48px">
                  <h1>广西南南铝加工有限公司</h1>
                  <p>主要产品包括具有高附加值的铝合金铸造板块材料、大型挤压型材、热轧中厚板和冷轧卷带材等大规格高性能铝合金产品。满足交通运输业、工业制造业、建筑业等各个领域对高品质、高性能铝合金材料的市场需求</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    
    <div class="size-box__column"></div>
    <div class="size-box__column"></div>
    <div class="size-box__column"></div>
    <el-dialog title="伙伴入驻" :visible.sync="addDialogVisible" width="50%">
      <!--内容主体区-->
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="120px" align="middle">
        <el-form-item label="公司名称" prop="companyName">
          <el-input v-model="addForm.companyname"></el-input>
        </el-form-item>
        <el-form-item label="公司法人" prop="companyPerson">
        <el-input v-model="addForm.companyperson"></el-input>
        </el-form-item>
        <el-form-item label="公司邮箱" prop="companyEmail">
        <el-input v-model="addForm.companyemail"></el-input>
        </el-form-item>
        <el-form-item label="公司地址" prop="companyAddress">
          <el-input v-model="addForm.manager"></el-input>
        </el-form-item>
        <el-form-item label="商务联系人电话" prop="busiMgrTel">
          <el-input v-model="addForm.telephone"></el-input>
        </el-form-item>
        <el-form-item label="上传营业执照" prop="license">
          <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <!--底部区域-->
      <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                imageUrl: '',
                // 弹窗标记
                dialog_show: true,
                headings: ['华为云信息技术有限公司','华为云信息技术有限公司','华为云信息技术有限公司'],
                addDialogVisible: false,
                // 添加用户的表单数据
                addForm: {
                    companyName: '',
                    companyPerson: '',
                    companyEmail: '',
                    companyAddress: '',
                    busiMgrTel: '',
                    license: ''
                },
                // 添加表单的验证规则对象
                addFormRules: {
                    companyName: [
                        { required: true, message: '请输入公司名称', trigger: 'blur' },
                        { min: 3, max: 10, message: '用户名的长度在3-10个字符之间', trigger: 'blur' }
                    ],
                    companySummary: [
                        { required: true, message: '请输入公司简介', trigger: 'blur' },
                        { min: 3, max: 10, message: '公司简介的长度在10-20个字符之间', trigger: 'blur' }
                    ],
                    companyPerson: [
                        { required: true, message: '请输入公司法人', trigger: 'blur' },
                        { min: 3, max: 10, message: '合作方向的长度在3-10个字符之间', trigger: 'blur' }
                    ],
                    companyEmail: [
                        { required: true, message: '请输入公司邮箱', trigger: 'blur' },
                        { min: 3, max: 10, message: '合作方向的长度在3-10个字符之间', trigger: 'blur' }
                    ],
                    companyAddress: [
                        { required: true, message: '请输入公司地址', trigger: 'blur' },
                        { min: 3, max: 10, message: '公司地址的长度在3-10个字符之间', trigger: 'blur' }
                    ],
                    busiMgrTel: [
                        { required: true, message: '请输入商务联系人电话', trigger: 'blur' },
                        { min: 3, max: 10, message: '经理电话的长度在3-10个字符之间', trigger: 'blur' }
                    ],
                    license: [
                        { required: true, message: '请上传营业执照', trigger: 'blur' }
                    ]
                },
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px',
                
            }
        },
        methods: {
            toCaseList () {
              this.$router.push({ name: "caseList"});
            },
            goToCaseCenter() {
              this.$router.push({ path: "/partner/CaseDetail"});
            },
            goToEnterpriseCenter(id) {
              console.log("打开的企业id:"+id);
              this.$router.push({ path: "/partner/EnterpriseDetail",query: { id: id} });
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    }
</script>

<style lang="less" scoped>
@import "~@/style/variables.less";
  .btn_class{
    horiz-align: left;
  }
.main{
  background-color: #F1F1F1;
  .title{
    font-size:25px;
    padding: 35px 15px 35px 0;
  }
}

.banner {
  width: 100%;
  height: 400px;
  background: url("../../assets/partner1.png") no-repeat center 100%;
  .banner-main {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 80px 0;
    .banner-main__title {
      font-size: 42px;
      color: #ffffff;
    }
    .banner-main__subtitle {
      font-size: 14px;
      color: #ffffff;
      margin: 20px 0;
    }
    .banner-main__btn {
      cursor: pointer;
      color: #ffffff;
      transition: all .4s;
      display: block;
      width: 138px;
      height: 39px;
      line-height: 39px;
      background: rgba(0,220,243,0.5);
      border: 1px solid #00dcf3;
      color: #ffffff;
      font-size: 14px;
      text-align: center;
      &:hover {
        background: rgba(0,220,243,0.8);
      }
    }
  }
}

.title_class{
  width: 100%;
  color: #252b3a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
}
.summary_class{
  width: 100%;
  margin-top: 4px;
  color: #8a8e99;
  font-size: 14px;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 16px;
}

.el-col{
  height: 560px;
}
.model-main {
  width: 1200px;
  padding: 20px 0;
  margin: 0 auto;
  .wrapper{
    max-width: 1240px;
    margin: 0 auto;
    .ant-row{
      position: relative;
      height: auto;
      zoom: 1;
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      box-sizing: border-box;
      .ant-row:before{
        display: table;
        content: "";
      }
      .ant-row:after{
        content: " ";
        font-size: 0;
        height: 0;
        clear: both;
        visibility: hidden;
      }
      .ant-col{
        display: block;
        box-sizing: border-box;
        width: 33.33333333%;
        -webkit-box-flex: 0;
        .ant-box{
          cursor: pointer;
          width: 100%;
          height: 526px;
          background: #fff;
          box-shadow: 0 8px 16px 0 rgba(211,216,239,.4);
          position: relative;
          transition: all 0.4s;
          &:nth-child(3n) {
            margin-right: 0;
          }
          &:hover {
            transform: scale(1.02);
          }
          .box-img{
            width: 100%;
            vertical-align: middle;
            border-style: none;
          }
          .box-content{
            h1{
              font-size: 32px;
              line-height: 40px;
              margin-bottom: 6px;
            }
            p{
              font-size: 14px;
              color: #314659;
              line-height: 22px;
              margin-top: 20px;
            }
          }
        }
      }
    }
  }
  .model-title {
    display: flex;
    justify-content: space-between;
    .action {
      font-size: 14px;
      padding: 0 25px 0 0;
      cursor: pointer;
    }
  }
  .card {
    .card-box {
      margin-bottom: 15px;
      line-height: 28px;
      box-shadow: inset 0px 0px 32px 0px ;
    }
  }
}
.box-card{
  background-color: #fbfbfb;
  width: 380px;
  height:250px;
  display: inline-block;
  margin: 24px 20px 24px 0px;
  // box-shadow: rgb(192, 189, 189) 0px 0px 1px 0px ;
  // box-shadow: gray 0px 0px 10px 1px ;
  /*border-radius: 20px;*/

}
.box-card:hover{
  box-shadow: gray 0px 0px 10px 1px ;
}
.image_class {
  background: url("../../assets/partner1.png") no-repeat center 100%;
  height: 483px;
}
.banner-main__btn {
  cursor: pointer;
  color: #ffffff;
  transition: all .4s;
  display: block;
  width: 138px;
  height: 39px;
  line-height: 39px;
  background: rgba(0,220,243,0.5);
  border: 1px solid #00dcf3;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  &:hover {
    background: rgba(0,220,243,0.8);
  }
}
.settleIn{
  padding-top: 100px;
}
.avatar-uploader{
  width: 178px;
  height: 178px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.partner-wrap {
  display: flex;
  .partner-box {
    flex: 1;
    margin-right: 20px;
    padding: 48px 40px;
    transition: margin .3s cubic-bezier(.645,.045,.355,1);
    position: relative;
    height: 280px;
    box-shadow: 0px 0px 35px rgba(180,180,180,0.5);
    margin-top: 30px;
    // background-repeat: no-repeat;
    // background-size: cover;
    // background-position: 50%;
    &:last-child {
      margin-right: 0;
    }
    .partner-box__title {
      font-size: 24px;
      font-weight: 500;
      color: #0d1a26;
      text-align: center;
    }
    .partner-box__content {
      .text_overflow_ellipsis_more(2);
      font-size: 14px;
      line-height: 26px;
      margin-top: 30px;
      text-align: center;
      color: #314659;
    }
    &:hover {
      background-color: rgba(47,84,235,.95);
      margin-top: 0;
      .partner-box__title {
        color: #fff;
      }
      .partner-box__content {
        color: #fff;
      }
    }
  }
}

</style>
